<template>
  <div>
    <supertable
      class="SendTable"
      :tableData="tableData"
      :headerData="headerData"
      :isoperation="false"
      :height="1000"
      :total="total"
      :limit="limit"
      @IDchange="IDchangeFn"
      @CurrentChange="CurrentChange"
      @SizeChange="SizeChange"
      @Delete="DeleteFn"
    >
      <template v-slot:btnSolt>
        <div class="SendbtnSolt">
          <el-button
            type="success"
            icon="el-icon-plus"
            size="mini"
            @click="add()"
            >添加</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="modification()"
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteFn()"
            >删除</el-button
          >
        </div>
      </template>
    </supertable>
    <!-- 添加 -->
    <div>
      <el-dialog
        title="添加消息发送者"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        v-DragWindow
      >
        <div>
          <el-row>
            <el-col :span="12">
              <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="发送类">
                  <el-input v-model="form.sendClass"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">提 交</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 修改 -->
    <div>
      <el-dialog
        title="添加消息发送者"
        :visible.sync="Visible"
        width="70%"
        :before-close="handleClose"
        v-DragWindow
      >
        <div>
          <el-row>
            <el-col :span="12">
              <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="发送类">
                  <el-input v-model="form.sendClass"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="Visible = false">取 消</el-button>
          <el-button type="primary" @click="modificationSubmit()"
            >提 交</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import supertable from "@/components/supertable";
import {
  messageSenderList,
  messagesender,
  messagesenderDelete,
} from "@/api/MessageSender";
export default {
  data() {
    return {
      page: 1,
      limit: 20,
      total: null,
      val: "",
      form: {
        name: "",
        sendClass: "",
      },
      dialogVisible: false,
      Visible: false,
      tableData: [],
      headerData: [
        {
          prop: "name",
          label: "名称",
          width: "",
        },
        {
          prop: "sendClass",
          label: "发送类",
          width: "",
        },
      ],
    };
  },
  mounted() {
    let _self = this;
    _self.messageSenderListFn();
  },
  methods: {
    //分页
    CurrentChange(val) {
      let _self = this;
      console.log(val);
      _self.page = val;
      _self.messageSenderListFn();
    },
    SizeChange(val) {
      let _self = this;
      console.log(val);
      _self.limit = val;
      _self.messageSenderListFn();
    },

    //删除
    DeleteFn(val) {
      let _self = this;
      // console.log(val);
      _self.val = val[0];
    },
    //删除
    deleteFn() {
      let _self = this;
      let data = {
        id: _self.val.id,
      };
      _self
        .$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          messagesenderDelete(data).then((res) => {
            // console.log(res);
            if (res.code == 20000) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
            _self.messageSenderListFn();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改
    modification() {
      let _self = this;
      _self.Visible = true;
      _self.form.name = _self.val.name;
      _self.form.sendClass = _self.val.sendClass;
    },

    //修改提交
    modificationSubmit() {
      let _self = this;
      let data = {
        name: _self.form.name,
        className: _self.form.sendClass,
        id: _self.val.id,
      };
      if (_self.form.name == "" || _self.form.sendClass == "") {
        console.log(_self.form.name);
        this.$message.error("不能为空");
        return;
      } else {
        messagesender(data).then((res) => {
          // console.log(res);
          if (res.code == 20000) {
            _self.messageSenderListFn();
            _self.Visible = false;
            this.$message({
              message: "操作成功",
              type: "success",
            });
          }
          // else{
          //   this.$message(res.message)
          // }
        });
      }
    },

    //行数据传值
    IDchangeFn(val) {
      let _self = this;
      console.log(val);
      _self.val = val;
    },

    //添加
    add() {
      let _self = this;
      _self.dialogVisible = true;
      _self.form.name = "";
      _self.form.sendClass = "";
    },
    // 添加提交
    submit() {
      let _self = this;
      let data = {
        name: _self.form.name,
        className: _self.form.sendClass,
        id: "",
      };
      if (_self.form.name == "" || _self.form.sendClass == "") {
        console.log(_self.form.name);
        this.$message.error("不能为空");
        return;
      } else {
        messagesender(data).then((res) => {
          // console.log(res);
          if (res.code == 20000) {
            _self.messageSenderListFn();
            _self.dialogVisible = false;
            this.$message({
              message: "操作成功",
              type: "success",
            });
          } else {
            if (res.code == 9999) {
              this.$message.error("改短信发送器已存在，请勿重复添加");
            }
          }
        });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //表格数据
    messageSenderListFn() {
      let _self = this;
      _self.tableData = [];
      let data = {
        page: _self.page,
        limit: _self.limit,
      };
      messageSenderList(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          let { limit, current, total } = res.data;
          _self.page = current;
          _self.limit = limit;
          _self.total = total;
          for (let item of res.data.records) {
            _self.tableData.push({
              name: item.name,
              sendClass: item.className,
              id: item.id,
            });
          }
        }
      });
    },
  },
  components: {
    supertable,
  },
};
</script>

<style scoped>
.SendTable {
  margin: 20px;
}
.SendbtnSolt {
  margin: 20px 0;
}
</style>